<template>
	<transition name="popup-fade" appear>
		<view class="popup-overlay" v-if="visible" @click="closePopup">
			<view class="popup-content" @click.stop>
				<!-- 顶部导航栏 -->
				<view class="popup-header">
					<!-- 左侧关闭按钮 -->
					<view class="close-btn" @click="closePopup">
						<image class="close-img" src="/static/closePage.png" mode=""></image>
					</view>

					<!-- 右侧金币计数器 -->
					<view class="coin-container">
						<image class="coin-icon" src="/static/coin-icon.png" mode="aspectFit"></image>
						<text class="coin-amount">{{ coinAmount }}</text>
					</view>
				</view>
  
				<!-- 顶部提示文字 -->
				<!-- <view class="popup-description">
					<text class="description-text">choose one of three subscription offers</text>
					<text class="description-text">above and get access to premium offers</text>
				</view> -->

				<!-- 订阅优惠标题 -->
				<view class="subscription-title">
					<view class="section-bg"></view>
					<view class="subscription-text">
						<text class="subscription-text">{{langsize['OFFERS'] || 'SUBSCRIPTION OFFERS'}}</text>
					</view>
				</view>

				<!-- 订阅卡片轮播 -->
				<subscription-carousel :cardList="subscriptionCards" :autoplay="false" @change="onCarouselChange"
					@selected="onCardSelected" />

				<!-- 底部说明文字 -->
				<view class="bottom-info">
					<text class="info-text">{{langsize['Weekly'] || 'Weekly pricing. Auto-renew, cancel anytime.'}}</text>
					<view class="links">
						<text class="link-text" @click="openArticle('XA55915081')">{{langsize['privacy-policy']}}</text>
						<text class="link-text" @click="openArticle('XA38549026')">{{langsize['user-agreement']}}</text>
					</view>
					<!-- <view class="links">
						<text class="link-text" @click="openArticle('XA95479212')">{{langsize[['subscription-terms']] || 'Subscription Terms'}}</text>
					</view> -->
					<!-- <text class="info-text">Restore</text> -->
				</view>
			</view>
		</view>
	</transition>
</template>

<script>
	import SubscriptionCarousel from '@/components/subscription-carousel/subscription-carousel.vue'

	export default {
		name: 'SubscriptionPopup',
		components: {
			SubscriptionCarousel
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			subscriptionData: {
				type: Array,
				default: () => []
			},
			coinAmount: {
				type: [String, Number],
				default: '31'
			},
			langsize:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				defaultCards: [{
						title: 'GOLD WEEKLY REFILL',
						background: '/static/img01.png',
						totalCoins: '6175',
						instantCoins: '3375',
						dailyCoins: '400',
						instantLabel: 'INSTANTLY',
						dailyLabel: 'EVERY DAY',
						price: 19.99,
						priceText: '$19.99/week',
						type: 'gold-weekly'
					},
					{
						title: 'SILVER WEEKLY REFILL',
						background: '/static/img01.png',
						totalCoins: '4000',
						instantCoins: '2000',
						dailyCoins: '300',
						instantLabel: 'INSTANTLY',
						dailyLabel: 'EVERY DAY',
						price: 14.99,
						priceText: '$14.99/week',
						type: 'silver-weekly'
					},
					{
						title: 'BRONZE WEEKLY REFILL',
						background: '/static/img01.png',
						totalCoins: '2500',
						instantCoins: '1250',
						dailyCoins: '200',
						instantLabel: 'INSTANTLY',
						dailyLabel: 'EVERY DAY',
						price: 9.99,
						priceText: '$9.99/week',
						type: 'bronze-weekly'
					}
				]
			}
		},
		computed: {
			// 动态订阅卡片数据
			subscriptionCards() {
				// 如果有传入的订阅数据，使用传入的数据；否则使用默认数据
				if (this.subscriptionData && this.subscriptionData.length > 0) {
					return this.subscriptionData;
				}
				return this.defaultCards;
			}
		},
		methods: {
			closePopup() {
				this.$emit('close');
			},
			onCardSelected(did, productId) {
				// console.log('选择了订阅卡片:', card.title, '索引:', index);
				this.$emit('subscription-selected', did,productId);
			},
			onCarouselChange(index, card) {
				console.log('轮播切换到:', index, card.title);
			},
			openArticle(type){
				this.$emit('openArticle',type)
			}
		}
	}
</script>

<style scoped>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
	}

	.popup-content {
		background: #2A2A2A;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		position: relative;
		overflow-y: auto;
		transform: translateY(0);
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.popup-fade-enter-active,
	.popup-fade-leave-active {
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.popup-fade-enter-from {
		opacity: 0;
		background: rgba(0, 0, 0, 0);
	}

	.popup-fade-enter-from .popup-content {
		transform: translateY(100%);
		opacity: 0;
	}

	.popup-fade-leave-to {
		opacity: 0;
		background: rgba(0, 0, 0, 0);
	}

	.popup-fade-leave-to .popup-content {
		transform: translateY(100%);
		opacity: 0;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		padding-top: 20rpx;
	}

	.close-btn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-img {
		width: 24rpx;
		height: 24rpx;
	}

	.coin-container {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 25rpx;
		padding: 8rpx 16rpx;
		gap: 8rpx;
	}

	.coin-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.coin-amount {
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 描述文字 */
	.popup-description {
		text-align: center;
	}

	.description-text {
		color: #999999;
		font-size: 28rpx;
		line-height: 1.4;
		display: block;
	}

	/* 订阅标题 */
	.subscription-title {
		height: 140rpx;
		line-height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-image: url('/static/bgpup.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.subscription-text {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		text-transform: uppercase;
	}

	/* 底部信息 */
	.bottom-info {
		text-align: center;
	}

	.info-text {
		color: #999999;
		font-size: 24rpx;
		display: block;
		margin-bottom: 20rpx;
	}

	.links {
		display: flex;
		justify-content: center;
		gap: 40rpx;
		margin-bottom: 15rpx;
	}

	.link-text {
		color: #999999;
		font-size: 22rpx;
		text-decoration: underline;
	}

	/* 内容渐入动画 */
	.popup-content>* {
		animation: contentSlideIn 0.6s ease-out 0.2s both;
	}

	@keyframes contentSlideIn {
		0% {
			opacity: 0;
			transform: translateY(20rpx);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>